<div>
  <centerHeader :title="header"></centerHeader>
  <div class="lists">
    <el-tabs v-model="informationActiveName" type="card">
      <el-tab-pane label="订单统计" name="first">
        <!-- 四张报表 -->
        <div v-if="data1.length==0||data2.length==0||data3.length.length==0||data4.length==0">正在加载中...</div>
        <div v-else>
          <div class="order">
            <div class="order-list order-list1" v-for="(item,index) in data1" :key="'1_'+index">
              <div class="list-left"> 
                <h2>今日充值</h2>
                <p class="nonow">({{count}}s后自动刷新)</p>
                <h1>{{item.tot | NumFormat}}</h1>
              </div>
              <div class="list-center">
                <ul>普通充值
                  <li>{{item.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.count_money}}笔</li>
                  <li>未支付:{{item.no.counts_money}}笔</li>
                  <li>完成率:{{item.rate}}</li>
                </ul>
              </div>
              <div class="list-center list-right">
                <ul>年度VIP会员
                  <li>{{item.vip.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.vip.count_money}}笔</li>
                  <li>未支付:{{item.vipno.counts_money}}笔</li>
                  <li>完成率:{{item.vip_rate}}</li>
                </ul>
              </div>
            </div>

            <div class="order-list order-list1" v-for="(item,index) in data2" :key="'2_'+index">
              <div class="list-left">
                <h2>昨日充值</h2>
                <h1>￥{{item.tot | NumFormat}}</h1>
              </div>
              <div class="list-center">
                <ul>普通充值
                  <li>{{item.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.count_money}}笔</li>
                  <li>未支付:{{item.no.counts_money}}笔</li>
                  <li>完成率:{{item.rate}}</li>
                </ul>
              </div>
              <div class="list-center list-right">
                <ul>年度VIP会员
                  <li>{{item.vip.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.vip.count_money}}笔</li>
                  <li>未支付:{{item.vipno.counts_money}}笔</li>
                  <li>完成率:{{item.vip_rate}}</li>
                </ul>
              </div>
            </div>

          </div>
          <div class="order">
            <div class="order-list order-list1" v-for="(item,index) in data3" :key="'3_'+index">
              <div class="list-left">
                <h2>本月充值</h2>
                <p class="nonow">(不含当日)</p>
                <h1>￥{{item.tot | NumFormat}}</h1>
              </div>
              <div class="list-center">
                <ul>普通充值
                  <li>{{item.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.count_money}}笔</li>
                  <li>未支付:{{item.no.counts_money}}笔</li>
                  <li>完成率:{{item.rate}}</li>
                </ul>
              </div>
              <div class="list-center list-right">
                <ul>年度VIP会员
                  <li>{{item.vip.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.vip.count_money}}笔</li>
                  <li>未支付:{{item.vipno.counts_money}}笔</li>
                  <li>完成率:{{item.vip_rate}}</li>
                </ul>
              </div>
            </div>
            <div class="order-list order-list1" v-for="(item,index) in data4" :key="'4_'+index">
              <div class="list-left">
                <h2>累计充值</h2>
                <p class="nonow">(不含当日)</p>
                <h1>￥{{item.tot | NumFormat}}</h1>
              </div>
              <div class="list-center">
                <ul>普通充值
                  <li>{{item.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.count_money}}笔</li>
                  <li>未支付:{{item.no.counts_money}}笔</li>
                  <li>完成率:{{item.rate}}</li>
                </ul>
              </div>
              <div class="list-center list-right">
                <ul>年度VIP会员
                  <li>{{item.vip.sum_money | NumFormat}}</li>
                  <li>已支付:{{item.vip.count_money}}笔</li>
                  <li>未支付:{{item.vipno.counts_money}}笔</li>
                  <li>完成率:{{item.vip_rate}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="s-table">
          <table class="table" border="1">
            <thead>
              <th style=" width: 10%;">日期</th>
              <th style=" width: 10%;">充值金额</th>
              <th style=" width: 20%;">普通充值</th>
              <th style=" width: 20%;">充值支付订单数</th>
              <th style=" width: 20%;">年费VIP会员</th>
              <th style=" width: 20%;">年费VIP会员支付订单数</th>
            </thead>
            <tbody class="tbody">
              <tr v-for="(item,index) in data5" :key="'5_'+index">
                <td class="td1">{{timestampToTime(item.pay_time)}}</td>
                <td class="td1">￥{{item.pay_money_count | NumFormat}}</td>
                <td class="td3">
                  <div class="td-div">
                    <h2>￥{{item.pay_ordinary | NumFormat}}</h2>
                    <p>充值人数:{{item.ordinary_number}}</p>
                    <p>人均:￥{{item.ordinary_Average}}</p>
                  </div>
                </td>
                <td class="td3">
                  <div class="td-div">
                    <h2>{{item.pay_ordinary_count}}笔</h2>
                    <p>{{item.pay_ordinary_unpaid}}笔未支付</p>
                    <p>完成率:{{item.ordinary_complete}}</p>
                  </div>
                </td>
                <td class="td3">
                  <div class="td-div">
                    <h2>￥{{item.pay_year | NumFormat}}</h2>
                    <p>充值人数:{{item.vip_number}}</p>
                    <p>人均:￥{{item.vip_Average}}</p>
                  </div>
                </td>
                <td class="td3">
                  <div class="td-div">
                    <h2>{{item.pay_year_count}}笔</h2>
                    <p>{{item.pay_year_unpaid}}笔未支付</p>
                    <p>完成率:{{item.vip_complete}}</p>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="getMore" @click="getMore" v-if="showMore">{{moredata1}}</div>
        <div class="getMore" v-else>没有数据了</div>
      </el-tab-pane>

      <el-tab-pane label="用户统计" name="second">
        <div class="order">
          <div class="order-list" v-for="(item,index) in data6" :key="'6_'+index">
            <div class="list-left">
              <h2>今日新增</h2>
              <p class="nonow">({{count}}s后自动刷新)</p>
              <h1>{{item.zong}}</h1>
            </div>
            <div class="list-center" style="width: 200px; margin-top: 32px;">
              <ul>
                <li>{{item.msix.count_gender}} 男性, {{item.nsix.count_gender}} 女性, {{item.count_gender}} 未知 </li>
                <li>已关注: {{item.sub. count_subscribe}} ({{item.grate}}) </li>
                <li>已付费: {{item.tot.count_money}} ({{item.crate}}) </li>
              </ul>
            </div>
          </div>
          <div class="order-list" v-for="(item,index) in data7" :key="'7_'+index">
            <div class="list-left">
              <h2>昨天新增</h2>
              <h1>{{item.zong}}</h1>
            </div>
            <div class="list-center" style="width: 200px; margin-top: 32px;">
              <ul>
                <li>{{item.msix.count_gender}} 男性, {{item.nsix.count_gender}} 女性, {{item.count_gender}} 未知 </li>
                <li>已关注: {{item.sub. count_subscribe}} ({{item.grate}}) </li>
                <li>已付费: {{item.tot.count_money}} ({{item.crate}}) </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="order">
          <div class="order-list" v-for="(item,index) in data8" :key="'8_'+index">
            <div class="list-left list-left1">
              <h2>本月新增</h2>
              <h2 style="margin-top: 0px;">(不含当日)</h2>
              <h1>{{item.zong}}</h1>
            </div>
            <div class="list-center" style="width: 200px; margin-top: 32px;padding-top:10px">
              <ul>
                <li>{{item.msix.count_gender}} 男性, {{item.nsix.count_gender}} 女性, {{item.count_gender}} 未知 </li>
                <li>已关注: {{item.sub. count_subscribe}} ({{item.grate}}) </li>
                <li>已付费: {{item.tot.count_money}} ({{item.crate}}) </li>
              </ul>
            </div>
          </div>
          <div class="order-list" v-for="(item,index) in data9" :key="'9_'+index">
            <div class="list-left list-left1">
              <h2>累积新增</h2>
              <h2 style="margin-top: 0px;">(不含当日)</h2>
              <h1>{{item.zong}}</h1>
            </div>
            <div class="list-center" style="width: 200px; margin-top: 32px;padding-top:10px">
              <ul>
                <li>{{item.msix.count_gender}} 男性, {{item.nsix.count_gender}} 女性, {{item.count_gender}} 未知 </li>
                <li>已关注: {{item.sub. count_subscribe}} ({{item.grate}}) </li>
                <li>已付费: {{item.tot.count_money}} ({{item.crate}}) </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="s-table">
          <table class="table" border="1">
            <thead>
              <th style=" width: 10%;">日期</th>
              <th style=" width: 10%;">新增用户</th>
              <th style=" width: 20%;">已关注</th>
              <th style=" width: 20%;">已付费</th>
              <th style=" width: 20%;">男性</th>
              <th style=" width: 20%;">女性</th>
            </thead>
            <tbody class="tbody">
              <tr v-for="(item,index) in data10" :key="'10_'+index">
                <td class="td1">{{item.datetime}}</td>
                <td class="td1">{{item.new_tot}}</td>
                <td class="td1">{{item.sub}}</td>
                <td class="td1">{{item.pay}}</td>
                <td class="td1">{{item.count_gender}}</td>
                <td class="td1">{{item.count_genders}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="小说充值统计" name="third">
        <div class="order">
          <div class="order-list">
            <div class="list-left list-left1">
              <h2 style="margin:40px 0;color:#000;">直接充值</h2>
            </div>
            <div class="list-center" style="width: 200px; margin-top: 32px;padding-top:15px;">
              <ul style="text-align: center;">
                <li>充值金额:￥0</li>
                <li>充值笔数:0</li>
              </ul>
            </div>
          </div>
          <div class="order-list">
            <div class="list-left list-left1">

              <h2 style="margin:40px 0;color:#000;">小说引导充值</h2>
            </div>
            <div class="list-center" style="width: 200px; margin-top: 32px;padding-top:15px;">
              <ul style="text-align: center;">
                <li>充值金额:￥0</li>
                <li>充值笔数:0</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="s-table">
          <table class="table" border="1">
            <thead>
              <th style=" width: 30%;">小说</th>
              <th style=" width: 15%;">今日充值</th>
              <th style=" width: 15%;">昨日充值</th>
              <th style=" width: 15%;">总充值</th>
              <th style=" width: 25%;">已推次数</th>
            </thead>
            <tbody class="tbody" v-for="(item,index) in data12" :key="'12_'+index">
              <!-- <tr>
                <td class="td1">《{{item.text1}}》</td>
                <td class="td3">
                  <div class="td-div">
                    <h2>￥{{item.text2}}</h2>
                    <p>{{item.text3}}笔</p>
                  </div>
                </td>
                <td class="td3">
                  <div class="td-div">
                    <h2>{{item.text4}}</h2>
                    <p>{{item.text5}}笔</p>
                  </div>
                </td>
                <td class="td3">
                  <div class="td-div">
                    <h2>{{item.text6}}</h2>
                    <p>{{item.text7}}笔</p>
                  </div>
                </td>
                <td class="td1">{{item.text8}}</td>
              </tr> -->
              <tr>
                <td colspan="5" style="text-align: center">
                  暂无数据
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</div>
